<template>
	<view class="main">



		<u-popup v-model="show" mode="bottom" :closeable="true" border-radius="24" height="550rpx">
			<view class="pop-tit pop-bor">
				综合排序
			</view>
			<scroll-view class="popup-box popup-boxTwo" scroll-y="true">
				<view class="popup" v-for="(item,index) in synthes" :key="index" @click="select(item,index)">
					<text>{{item.title}}</text>
					<u-icon v-if="index == isSelect" size="32" color="#CCA566" name="checkmark"></u-icon>
				</view>
			</scroll-view>
			<view class="refund-btn">
				<view class="butt " @click="thinkAgain">
					确定
				</view>
			</view>
		</u-popup>

		<u-popup v-model="isshow" mode="bottom" :closeable="true" border-radius="24" height="700rpx">
			<view class="pop-tit pop-bor">
				职称筛选
			</view>
			<scroll-view class="popup-box popup-boxTwo" scroll-y="true">
				<view class="popup" v-for="(item,index) in synthesis" :key="index" @click="selectItem(item,index)">
					<text>{{item.dictLabel}}</text>
					<u-icon v-if="index == isSelectItem" size="32" color="#CCA566" name="checkmark"></u-icon>
				</view>
			</scroll-view>
			<view class="refund-btn">
				<view class="butt " @click="thinkAgainTwo">
					确定
				</view>
			</view>
		</u-popup>


		<view class="heal-title">
			<alltitleVue :title="title" :url="url" />
			<view class="search" :class="isTitle ? 'search-bg' : 'search-bgc'" @click="jumpSearch">
				<image src="../../static/home/seach.png" mode=""></image>
				<input v-model="from.keyword" type="text" class="search-input" placeholder="根据科室、姓名找医生" />
				<view class="vertical">
				</view>
				<view class="search-btn" :class="isTitle ? 'search-bgc' : 'search-bg'">
					搜索
				</view>
			</view>
		</view>


		<view class="box">
			<scroll-view show-scrollbar="false" scroll-y="true" class="scroll-Y scroll-left" @scrolltoupper="upper"
				@scroll="scroll" @scrolltolower="lower">
				<view class="box-left">
					<view class="left" :class="isTitle===index ? 'selectLeft' : ''" v-for="(item,index) in sort"
						:key="item,id" @click="department(item,index)">
						{{item.title}}
						<text></text>
					</view>
				</view>
			</scroll-view>
			<view class="">
				<view class="down-box">
					<view class="down-item down-right" @click="toggleDropdown(1)">
						<text :class="{ 'box-color': iscolor===1 }">综合排序</text>
						<view :class="['rotate-box rotating', { rotatings: iscolor===1 && rotating }]">
							<view class="uicon" :class="{ 'uicolor': iscolor === 1 }"></view>
						</view>
					</view>
					<view class="screen-bo" @click="toggleDropdown(2)">
						<text :class="{ 'box-color': iscolor===2 }">筛选</text>
						<view class="screen-box">
							<image v-if="iscolor===2" :src="screenImgs" mode=""></image>
							<image v-else :src="screenImg" mode=""></image>
						</view>
					</view>
				</view>
				<scroll-view show-scrollbar="false" scroll-y="true" class="scroll-Y scroll-Yy" @scrolltoupper="upper"
					@scroll="scroll" @scrolltolower="lower">
					<view class="box-right" v-if="list.length>0">
						<view class="right-box" v-for="(item,index) in list" :key="item,id"
							@click.stop="departmentdoc(item)">
							<card :card="item" :levelList="synthesis" />
						</view>
					</view>
					<view class="box-empty" v-else>
						<u-empty text="未找到相关医生" mode="list"></u-empty>
					</view>

				</scroll-view>
			</view>
		</view>
	</view>



</template>

<script>
	import title from '../../components/title.vue';
	import card from '../../components/card.vue';
	import config from '../../utils/config';
	import {
		listDep,
		getregistration,
		doctorList
	} from '../../service/api.js'
	export default {
		data() {
			return {
			screenImg:config.topHost + '2025/01/10/2cef7a2c78a3495496237fec9f99fbe6.png',
			screenImgs:config.topHost + '2025/01/10/1077a9ed087440fea348633e3723feda.png',
				synthes: [{
						title: "综合排序",
						value: 2,
					},

					{
						title: "价格从高到低",
						value: "asc",
					},
					{
						title: "价格从低到高",
						value: "dsc",
					},
				],
				isshow:false,
				rotating:false,
				show: false,
				iscolor: 0,
				isSelect: 0,
				isSelectItem:"",
				isSel: 0,
				title: "预约挂号",
				isTitle: 0,
				depId: 0,
				params: {
					depId: 0,
					name: "",
					level: "",
					orderPrice: "",
				},
				synthesis: [],
				list: [],
				sort: [{
						id: 1,
						intro: "<p>1111</p>",
						mobile: "1111",
						parentId: 0,
						photoUrl: "1846822197126328322",
						shows: "0",
						sorts: "0",
						title: "内科",
					},
					{
						id: 1,
						intro: "<p>1111</p>",
						mobile: "1111",
						parentId: 0,
						photoUrl: "1846822197126328322",
						shows: "0",
						sorts: "0",
						title: "中医科",
					},

				],

			}
		},
		components: {
			title,
			card
		},
		onLoad() {
			this.getlistDep();

			this.getlevel();
		},
		methods: {
			selectItem(item,index){
				this.params.orderPrice="";
				this.params.level = item.dictValue;
				this.isSelectItem=index;
				
			},
			select(item, index) {
				this.params.level ="",
				this.params.orderPrice = item.value;
				this.isSelect = index;
				
			},
			department(item, index) {
				this.depId = item.id;
				this.isTitle = index;
				this.getdepDoctor();
			},
			//跳珠搜索页
			jumpSearch() {
				uni.navigateTo({
					url: '/preLoading/search'
				})
			},
			toggleDropdown(index) {
				this.iscolor = index;
				if (index == 1) {
					this.rotating = true;
					this.show = !this.show
				} else {
					this.isshow = !this.isshow
				}

			},
			thinkAgain() {
				this.show = false;
				this.rotating = false;
				this.iscolor=4;
				this.getdepDoctor();
			},
			thinkAgainTwo() {
				this.isshow = false;
				this.iscolor=4;
				this.getdepDoctor();
				
			},



			//请求医生等级
			async getlevel() {
				let res = await getregistration("doctor_level")
				if (res.code == 200) {
					this.synthesis = res.rows;
					
				}
			},
			//获取科室
			async getlistDep() {
				let res = await listDep();
				if (res.code == 200) {
					this.sort = res.rows;
					this.depId = this.sort[0].id
					this.getdepDoctor()
				}
			},
			//请求医生列表
			async getdepDoctor() {
				this.params.depId = this.depId;

				let res = await doctorList(this.params)
				if (res.code == 200) {

					this.list = res.rows;
				}
			},
			register(item) {
				uni.navigateTo({
					url: `/integration/register/index?item=${JSON.stringify(item)}`
				})
			},
			departmentdoc(item) {
				item.dictLabel = this.synthesis[item.level].dictLabel
				uni.navigateTo({
					url: `/integration/doctorDetails/index?item=${JSON.stringify(item)}`
				})
			},


		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background: #F5F3F0;

		.heal-title {
			background: #fff;
			padding-bottom: 24rpx;
		}

		.tabs-box {
			width: 500rpx;
		}

		.box {
			margin-top: 24rpx;
			display: flex;



			.scroll-Y {
				height: calc(100vh - 297rpx);

				.box-left {
					width: 240rpx;
					border-radius: 0rpx 16rpx 0 0;

					.left {
						font-weight: 500;
						font-size: 32rpx;

						text-align: center;
						height: 90rpx;
						line-height: 90rpx;
						background: #cca566;
						color: #fff;

					}

					.left:first-child {
						border-radius: 0rpx 16rpx 0 0;
					}

					.selectLeft {
						position: relative;
						background: #fff;
						color: #cca566;

						text {
							position: absolute;
							left: -10rpx;
							display: inline-block;
							width: 16rpx;
							height: 90rpx;
							background: #cca566;
							border-radius: 10rpx;
						}
					}
				}

				.box-right {
					.right-box {
						margin: 0 24rpx;
					}
				}
			}

			.scroll-left {
				background: #cca566;
				width: 240rpx;
				border-radius: 0rpx 16rpx 0 0;
			}

			.scroll-Yy {
				height: calc(100vh - 405rpx);
			}
		}

		.search {
			width: 654rpx;
			margin-left: 24rpx;
			padding: 0 24rpx;
			height: 64rpx;
			background-color: #f5f3f0;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 10rpx;
			}

			input {
				font-size: 24rpx;
				color: #B3B3B3;
				width: 525rpx;
			}

			.vertical {
				height: 25rpx;
				border-left: 1rpx solid #808080;
				margin: 0 20rpx;

			}

			.search-btn {
				font-size: 24rpx;
				color: #4D4D4D;
				width: 72rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				background: #fff;

				border-radius: 4rpx 4rpx 4rpx 4rpx;
			}
		}
	}

	.between {
		width: 100%;
		height: 24rpx;
		background-color: #f5f3f0;
	}

	.box-empty {
		height: calc(100vh - 414rpx);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.rotate-box {
		width: 20rpx;
		height: 15rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 6rpx;
		// background-color: #e74c3c;
		transition: transform 0.3s ease-out;
	}

	.popup-box {

		.popup {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 24rpx;
		}
	}

	.uicon {

		width: 0;
		height: 0;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-bottom: 15rpx solid #808080;
	}

	.uicolor {
		border-bottom: 15rpx solid #CCA566;
	}

	.rotating {
		transform: rotate(180deg);
	}
	.rotatings {
		transform: rotate(0);
	}

	.down-item {
		display: flex;
		align-items: center;
		font-weight: 500;
	}

	.down-box {
		font-size: 24rpx;
		margin-left: 24rpx;
		margin-bottom: 24rpx;
		width: 418rpx;
		padding: 0 24rpx;
		height: 64rpx;
		align-items: center;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		display: flex;
		justify-content: space-between;
	}

	.box-color {
		color: #CCA566;
	}


	.pop-tit {
		text-align: center;
		padding: 30rpx 0;
		font-size: 32rpx;
		color: #1A1A1A;
		border-bottom: 1rpx solid #E6E6E6;
		margin-bottom: 20rpx;

	}

	.uicon {

		width: 0;
		height: 0;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-bottom: 15rpx solid #808080;

	}

	.uiconbot {
		width: 0;
		height: 0;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-top: 15rpx solid #808080;

	}

	.uicolor {
		margin-left: 5rpx;
		border-bottom: 15rpx solid #CCA566;
	}

	.uicolorbot {
		margin-left: 5rpx;
		border-top: 15rpx solid #CCA566;
	}

	.refund-btn {
		margin: auto;
		margin-top: 24rpx;
		line-height: 80rpx;
		text-align: center;
		width: 702rpx;
		height: 80rpx;
		background: #CCA566;
		border-radius: 8rpx 8rpx 8rpx 8rpx;

		.butt {
			color: #FFFFFF;
		}
	}
	.screen-bo{
		display: flex;
		align-items: center;
	}
	.screen-box{
		margin-left: 6rpx;
		image{
			width: 24rpx;
			height: 24rpx;
		}
	}
</style>